<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue插槽slot</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<child>
<!--<div class="header" slot="header"></div>-->  <!--显示取名插槽的默认值-->
<div class="footer" slot="footer">slot的footer</div>
</child>
</div>
<script>
	Vue.component('child',{
        /*取名插槽,slot name="name",使用 slot="name"*/
		template:`<div>
              <slot name="header">
              <h1>header slot</h1>
              </slot>
              <p>Dell</p>
              <slot name="footer">footer slot</slot>
     </div>`
	});
	var app = new Vue({
        el:"#app",
		data:{
   	   message:"hello world!"
		}
	})
</script>
</body>
<!--slot:插槽,子组件向父组件优雅的传递dom的结构->
</html>